<template>
  <div class="box">
    <h2>ref</h2>
    <!-- 1. 为内置标签添加ref  添加的标签就会存放在 vue实例的 $refs上-->
    <button ref="btn1">按钮1</button>
    <button ref="btn2">按钮2</button>

    <!-- 2. 为组件添加ref，直接获取组件实例对象 -->
    <v-child ref="c1"></v-child>
    <button @click="$refs.c1.username ='ls'">改变child中username的值</button>
    <button @click="$refs.c1.fn()">调用子组件中的方法改变username</button>
  </div>
</template>

<script>
import vChild from './child.vue'
export default {
    mounted(){
        // console.log(this) //this.$refs
        // console.log( this.$refs.btn2 )//这是原生dom对象
        // this.$refs.btn2.style.background = 'red'

        console.log( this.$refs.c1.username )//'zs'
    },
    components:{
        vChild
    },
    methods:{
        // f(){
        //     // this.$refs.c1.fn()
        // }
    }
};
</script>

<style>
</style>